<template>
  <div class="c-pb84 copyNot">
    <div v-if="testRes">
      <div class="c-p c-ph30">
        <div class="c-pt30">
          <div class="c-pa c-p-t94 c-textAlign-c c-ww174 c-p-r0" @click="ranking(1)" v-if="testRes.isCheck != -1&&testRes.isShowRanking==1">
            <img :src="require('@/assets/i/wap/exam/ranking.png')" alt="">
          </div>
          <div class="c-flex-row c-aligni-center">
            <img class="c-ww70 c-brp50 c-hh70" :src="$addXossFilter(testRes.headimgurl, require('@/assets/defult_head.png'))" alt="">
            <div class="c-fs28 c-fc-xblack c-fw-b c-ml16 c-text-ellipsis1 c-ww320">{{testRes.nickname}}</div>
          </div>
          <div v-if="testRes.showType==2" class="c-mt48 c-ww300 c-mlr-auto c-p c-mb60"><img :src="$addXossFilter(testRes.resultAvatar, require('../../../assets/voiceTestResult.png'))" alt=""></div>
          <div class="c-mt48 c-ww280 c-mlr-auto c-hh280 c-p c-mb60" v-if="testRes.showType==1">
            <x-circle :percent="testRes.accuracy * 100" :strokeWidth="5" :stroke-color="['#9AAAFF', '#6C83FF']" :trailWidth="5" :trailColor="'#f6f6f6'">
              <div class="c-fstyle-i">
                <span class="c-fs56 c-fc-xblack c-fw-b c-textAlign-c c-inlineblack">
                  {{testRes.totalpoins}}
                </span>
                <span class="c-fs20 score-text">分</span>
              </div>
            </x-circle>
          </div>
          <template v-if="testRes.isCheck != -1">
            <div class="c-fs26 c-lh50 c-fc-xblack c-textAlign-c c-mt32 c-fw-b" v-if="testRes.remarkTitle!=''">{{testRes.remarkTitle}}</div>
            <div class="c-fc-sblack c-fs24 c-lh48 c-mt32 copyNot" v-if="testRes.isRemark!=-1">
              <span v-if="testRes.remarkType == 1" class="c-fc-sblack">点评：</span><span v-if="testRes.remarkType == 1">{{review}}</span>
              <div v-if="testRes.remarkType == 2">点评：</div>
              <div v-if="testRes.remarkType == 2" v-html="review" class="c-lh36 c-fc-sblack c-ww-bw c-ww-ba c-contexty-scroll rich-text"></div>
            </div>
          </template>
          <div v-else class="c-fs24 c-fc-gray c-textAlign-c c-mt64">测试用时{{testRes.ansTime}}</div>
        </div>
        <div class="c-ww540 c-br40 c-mt56 c-textAlign-c c-center" :class="testRes.isMatch==2?'c-hh80 c-lh80 c-bg-ssmblue':'c-hh80 c-lh80 c-bd1-ssmblue'" @click="drawNowCom" v-if="testRes.isMatch==2 || testRes.isMatch==3">
          <div class="c-fs28 icon iconfont" :class="testRes.isMatch==2?'c-fc-white':'c-fc-mblue'">&#xea1b;<b class="c-ml10 c-fw-n">{{testRes.isMatch==2?"领取":"我的"}}证书</b></div>
        </div>
      </div>
      <div class="c-mt32 c-pt28 c-bd-t1 c-ph24" v-if="testRes.courseInfo && testRes.courseInfo.length > 0 && testRes.isCheck!=-1">
        <div class="c-fs28 c-fc-xblack">相关推荐</div>
        <div class="c-mt28" v-for="(item, index) in testRes.courseInfo" :key="index">
          <div class="c-flex-row" @click="clickGoDetails(item.linkType, item.id)">
            <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-br6">
              <template v-if="item.linkType == 8">
                <img v-if="item.cover" class="c-w100 c-center imgCloseBig" :src="$addXossFilter(item.cover)" alt="" />
                <img v-else-if="OFFICE_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_doc.png" alt="" />
                <img v-else-if="IMG_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_pic.png" alt="" />
                <img v-else-if="AUDIO_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_audio.png" alt="" />
                <img v-else-if="VIDEO_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_video.png" alt="" />
                <img v-else class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_com.png" alt="" />
              </template>
              <img v-else class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
            </div>
            <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
              <div class="c-fs22 c-lh32 c-text-ellipsis1 c-fc-xblack">{{item.name}}</div>
              <!-- 课程展示讲师 -->
              <div class="c-fs18 c-fc-gray" v-if="item.prodType == ckFrom.course">讲师：{{item.teacherName!=''&&item.teacherName!=null?item.teacherName:'未知'}}</div>
              <div class="c-flex-row c-justify-sb c-w100">
                <div class="c-fs18 c-fc-white c-ph8 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">{{productType[item.linkType]}}</div>
                <!-- 资料加密判断 -->
                <div class="c-fs22  theme-fc" v-if="item.linkType != 8 && item.permission == 21">
                  加密
                </div>
                <!-- 活动不展示价格 -->
                <div class="c-fs22  theme-fc" v-else-if="item.linkType != 7">
                  <span class="c-fs22" v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter(item.optimal)}}</span>
                  <!-- 商城商品价格 -->
                  <span>{{item.payType | priceValueFilter(item.price, item.prodType, item.optimal)}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-wrap c-flex-row c-justify-sb c-fs28" v-if="testRes!=null">
      <div v-if="testRes.isCheck!=-1" class="btn-next-question c-flex-grow1 c-flex-row c-flex-center" @click="examShare(1)">
        <span class="c-flex-grow1 c-textAlign-c c-fc-mblue">嘚瑟一下</span>
      </div>
      <div v-if="testRes.isCheck!=-1&&testRes.enableResurvey==1" class="c-bd-r1-mgray c-mt30 c-mb30"></div>
      <div v-if="testRes.isCheck!=-1&&testRes.enableResurvey==1" @click="goTest(1)" class="btn-next-question c-flex-grow1 c-flex-row c-flex-center c-fc-mblue">重测一下</div>
    </div>
    <!-- 测评证书 -->
    <examination-cer-new :bigType="1" :prodId="topicId?topicId:paperMainId" ref="examCerNew" :testRes="testRes" :paperMainId="paperMainId" :prodType="77"  :topicId="topicId"></examination-cer-new>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import { XCircle } from 'ckjrweb-mp-ui/src/components/index';
import examinationCerNew from "@/components/templates/examination/examinationCerNew.vue";
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: "VoiceTestResult",
  components: {
    XCircle,
    examinationCerNew
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      OFFICE_TYPE: ["doc", "docx", "pdf", "ppt", "pptx", "xls", "xlsx"],
      IMG_TYPE: ["bmp", "jpg", "png", "gif", "svg", "psd", "webp", "jpeg", "eps", "tga", "tiff"],
      AUDIO_TYPE: ["ogg", "mp3", "wav", "asf", "wma", "mp3pro", "real", "ape", "module", "midi", "vqf"],
      VIDEO_TYPE: ["avi", "wmv", "mpeg", "asf", "mpg", "dv", "rm", "rmvb", "mod", "flv", "mp4", "qt", "divx", "mkv", "vob"],
      review: '',
      answerCardList: [],
      testRes: null,
      paperMainId: -1,
      topicId: -1,
      showCer: false,
      isDrawing: false,
      examinationInfo: null,
      isResurvey: false, //支持重测，重测时间是否已到
      ttId: "",
      tpId: "",
      tlId: "",
      progress: "",
      matchPaper:'',
      productType: {
        1051: '视频',
        1052: '音频',
        1053: '图文',
        9: '专栏',
        51: '直播',
        7: '活动',
        61: '知识套餐',
        78: '训练营',
        41: '打卡',
        10: '社群',
        8: '资料',
        75: '互动测评',
        77: '语音测试',
        11: '测评',
        12: '商城商品'
      },
      ckFrom: global.ckFrom
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("测评结果");// eslint-disable-line
    this.topicId = 0;
    this.paperMainId = this.$route.query.paperMainId;
    this.testRes = null;
    this.answerCardList = [];
    this.examinationInfo = null;
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || ""; //环节id
    this.tlId = this.$route.query.tlId || "";
    this.progress = this.$route.query.progress || "";
    this.setProgress();
    let $this = this;
    //获取测试结果数据
    utilJs.getMethod(global.apiurl + 'exam/completeTest/' + this.paperMainId + '?topicId=' + this.topicId, function (res) {
      $this.testRes = res;
      let nt = (new Date()).getTime();
      let lt = utilJs.getTimeByDate($this.testRes.lastJoinTime);
      if (($this.testRes.intervalTime != 0) && (lt + $this.testRes.intervalTime * 60 * 60 * 1000 > nt)) {
        $this.isResurvey = false;
      } else {
        $this.isResurvey = true;
      }
      if ($this.testRes.isRemark != -1) {
        $this.review = $this.testRes.remark;
      } else {
        $this.review = '';
      }
      if ($this.testRes.isMatch == 2) {
        $this.drawNowCom();
      }
    });
    //获取答题卡数据
    // utilJs.getMethod(global.apiurl + 'exam/answerCard/' + this.paperMainId + '?topicId=' + this.topicId, function (res) {
    //   $this.answerCardList = res.answerSheet;
    //   for (let i = 0; i < res.notAnswerNum; i++) {
    //     $this.answerCardList.push('');
    //   }
    // });

    utilJs.getMethod(global.apiurl + "mutual/detail/" + this.paperMainId,
      function (res) {
        // if (res.permission == false) {
        //   $this.$routerGo($this, "push", {
        //     path: "/homePage/mutuaTest/mutuaTestDetail",
        //     query: { mutuaTestId: $this.paperMainId }
        //   });
        // } else {
        $this.examinationInfo = res;
        $this.wechatShare();
        // }
      }
    );
  },
  deactivated() {
    this.setProgress();
  },
  mounted() {
  },
  computed: {},
  watch: {},
  methods: {
    clickGoDetails(type, id) {
      let courseType = type == 1051 ? 0 : type == 1052 ? 1 : type == 1053 ? 2 : '';
      let prodType = type == 1051 || type == 1052 || type == 1053 ? global.ckFrom.course : type;
      goDetails(this, prodType, id, '', courseType)
    },
    drawNowCom() {
      this.$refs.examCerNew.drawNow('', this.paperMainId, global.ckFrom.voiceTest)
    },
    ranking: function (eId) {
      this.$routerGo(this, "push", {
        path: '/homePage/voiceTest/voiceTestRank',
        query: { paperMainId: this.paperMainId }
      });
    },
    examShare: function (eId) {
      this.$routerGo(this, "push", {
        path: '/homePage/examination/examinationSpread',
        query: { paperMainId: this.paperMainId, topicId: this.topicId, isFromVoice: 1 }
      });
    },
    goTest: function (eId) {
      //    this.$emit("testAgain",eId);
      let nt = (new Date()).getTime();
      let lt = utilJs.getTimeByDate(this.testRes.lastJoinTime);
      if ((this.testRes.intervalTime != 0) && (lt + this.testRes.intervalTime * 60 * 60 * 1000 > nt)) {
        let interval = lt + (this.testRes.intervalTime * 60 * 60 * 1000) - nt;
        let secondTime = parseInt(interval / 1000);
        let minuteTime = 0;
        let hourTime = 0;
        if (secondTime > 60) {
          minuteTime = parseInt(secondTime / 60);
          secondTime = parseInt(secondTime % 60);
          if (minuteTime > 60) {
            hourTime = parseInt(minuteTime / 60);
            minuteTime = parseInt(minuteTime % 60);
          }
        }
        let showTime = minuteTime > 0 ? (hourTime > 0 ? (hourTime + '时' + minuteTime + '分' + secondTime + '秒') : (minuteTime + '分' + secondTime + '秒')) : (secondTime + '秒')
        this.$showCjToast({
          text: '请在' + showTime + '后重测',
          type: "text",
        });
      } else {
        let $this = this;
        utilJs.getMethod(global.apiurl + 'exam/transit/' + this.paperMainId + '?topicId=' + this.topicId, function (res) {
          $this.$routerGo($this, "replace", {
            path: "/homePage/voiceTest/voiceTestAnswer",
            query: { paperMainId: $this.paperMainId, topicId: 0, goOnNum: 1 }
          });
        })
      }
    },
    // 记录播放进度
    setProgress: function () {
      let data = {
        ttId: this.ttId, //营期ID
        tpId: this.tpId, //环节ID
        tlId: this.tlId, //课时ID
        ratio: 100, //完成进度0-100
      }
      utilJs.postMethod(`${global.apiurl}k12/trainings/progress`, data, res => {
      });
    },
    //分享
    wechatShare: function () {
      let title = this.examinationInfo.name;
      let shareImg = this.examinationInfo.avatar ? this.examinationInfo.avatar : require('../../../assets/examination_defult.png');
      let shareUrl = window.location.href.split("#")[0] + '#/homePage/voiceTest/voiceTestDetail?paperMainId=' + this.paperMainId + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = this.examinationInfo.shareDesc;//"共包含"+this.examinationInfo.hasPaper+"套考卷";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      var title = this.examinationInfo.name;
      var shareImg = this.examinationInfo.avatar ? this.examinationInfo.avatar : require('../../../assets/examination_defult.png');
      var shareUrl = window.location.href.split("#")[0] + '#/homePage/voiceTest/voiceTestDetail?paperMainId=' + this.paperMainId + '&refereeId=' + localStorage.getItem("userId");
      var shareDesc = this.examinationInfo.shareDesc;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.c-maxh106 {
  max-height: 2.65rem;
}
.btn-wrap {
  width: 100%;
  max-width: 640px;
  background: #fff;
  position: fixed;
  bottom: 0;
  z-index: 11;
  box-shadow: 0px -3px 10px 0px rgba(0,0,0,0.05);
}
.btn-next-question {
  font-size: 0.7rem;
  height: 2.1rem;
}
.c-pb84 {
  padding-bottom: 2.1rem;
}
.box{
  /* 最外层的盒子 */
  width:4.8rem;
  height:4.8rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.canvasBox {
  width: 750px;
  height: 1334px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.anvasContent {
  width: 750px;
  height: 1334px;
  position: relative;
}
.bgLocation {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
</style>


